<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://a.amap.com/jsapi_demos/static/resource/commonStyle.css"/>
    <title>海量麻点</title>
     <style type="text/css">
        .info {
        	/* silver */
            border: solid 1px rgba(255,215,0,1);
        }
        div.info-top {
            position: relative;
            /* 备用配色方案一蓝色
            rgba(62,62,62,0.5) */
            background: none repeat scroll 0 0 rgba(62,62,62,0.5);
            border-bottom: 1px solid rgba(255,215,0,1);
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #FFF;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        a:-webkit-any-link{
        	color: rgba(255,215,0,1);
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            color: #FFF;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
            color: #FFF;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
  </head>
  <body >
    <div id="container" class="map" tabindex="0"></div>
    <!-- <div class="button-group">
      <input type="button" class="button" value="单一图标" onclick = 'setStyle(0)'/>
      <input type="button" class="button" value="多个图标" onclick = 'setStyle(1)'/>
    </div> -->
    <!-- <script type="text/javascript" src = 'http://a.amap.com/jsapi_demos/static/citys.js'></script>  -->
    <script type="text/javascript" src = 'http://webapi.amap.com/maps?v=1.4.6&key=a614e211a04bf063521d3f938d4e38aa'></script>
    <script type="text/javascript" src="/data/jquery-1.2.6.min.js" charset="utf-8"></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //获取数据
    var citys = null;
    //发送ajax同步请求获取数据，防止数据未获取到就加载点
    $.ajax({ 
	    	url : '../data/citys.txt', 
	    	cache : false, 
	    	async : false, 
	    	type : "GET", 
	    	dataType : 'json/xml/html', 
	    	success : function (city){ 
	    		//console.log(city);
	    		citys = JSON.parse(city); 
	    	} 
    	});
    	//初始化地图
      var map = new AMap.Map('container', {
        zoom: 4,
        center: [102.342785, 35.312316],
        mapStyle:"dark"
      });
      //地图点击事件点的样式
      var style = [{
                      url: '../data/mass2.png',
                      anchor: new AMap.Pixel(3.5, 3.5),
                      size: new AMap.Size(7, 7)
                    }
                  ];
      //初始化mass元素
      var mass = new AMap.MassMarks(citys, {
            opacity:0.8,
            zIndex: 111,
            cursor:'pointer',
            style:style
      });
     //创建覆盖物
      var marker = new AMap.Marker({content:' ',map:map})
     //给覆盖物添加点击事件
      mass.on('mouseover',function(e){
        marker.setPosition(e.data.lnglat);
        marker.setLabel({content:e.data.name})
      })
      mass.setMap(map);
      //地图上点的点击事件
      var infoWindow =null;
      mass.on('click', function() {
    	  var testmarker = marker.getLabel();
    	  console.log("mass.on()");
    	  console.log(testmarker.content);
    	  //testajax(testmarker.content);
    	  chen(testmarker.content);
          //alert(testmarker.content);
          infoWindow.open(map, marker.getPosition());
      });
      function chen(keyword){
    	  console.log("chen=");
    	  $.ajax({
  	    	url : '/query/'+keyword, 
  	    	cache : false, 
  	    	async : false, 
  	    	type : "GET", 
  	    	dataType : 'json', 
  	    	success : function (result){
  	    		console.log("ajax=");
  	    		console.log(result);
  	    		//实例化信息窗体
  	    		getDataToInfoWindow(result);
  	    	} 
    	});
    	  var title;
    	    function getDataToInfoWindow(result){
    	    	title = result.company_name+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp' +result.company_natrue
    	    	+'</br>'+'公司规模:'+result.scale_min+'-'+result.scale_max,
    	        content = [];
    	    	content.push(result.job_title+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp薪资&nbsp:&nbsp'+result.salary_min+'-'+result.salary_max);
    	    	content.push("工作经验&nbsp:&nbsp"+result.work_experience+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp学历要求&nbsp:&nbsp"+result.min_degree);
    	    	content.push("招聘人数&nbsp:&nbsp"+result.recruiting_numbers);
    	    	content.push("公司地址&nbsp:&nbsp"+result.company_address);
    	    	content.push("<a href='"+result.homepage+"' color:#FFF;>了解更多>>>公司主页</a>");
    	    }
    	      infoWindow = new AMap.InfoWindow({
    	          isCustom: true,  //使用自定义窗体
    	          content: createInfoWindow(title, content.join("<br/>")),
    	          //16, -45
    	          offset: new AMap.Pixel(16, -25)
    	      });

    	      //构建自定义信息窗体
    	      function createInfoWindow(title, content) {
    	          var info = document.createElement("div");
    	          info.className = "info";
    			
    	          //可以通过下面的方式修改自定义窗体的宽高
    	          //info.style.width = "400px";
    	          // 定义顶部标题
    	          var top = document.createElement("div");
    	          var titleD = document.createElement("div");
    	          var closeX = document.createElement("img");
    	          top.className = "info-top";
    	          titleD.innerHTML = title;
    	          closeX.src = "http://webapi.amap.com/images/close2.gif";
    	          closeX.onclick = closeInfoWindow;

    	          top.appendChild(titleD);
    	          top.appendChild(closeX);
    	          info.appendChild(top);

    	          // 定义中部内容
    	          var middle = document.createElement("div");
    	          middle.className = "info-middle";
    	          middle.style.backgroundColor = 'rgba(62,62,62,0.5)';
    	          middle.innerHTML = content;
    	          info.appendChild(middle);

    	          // 定义底部内容
    	          var bottom = document.createElement("div");
    	          bottom.className = "info-bottom";
    	          bottom.style.position = 'relative';
    	          bottom.style.top = '0px';
    	          bottom.style.margin = '0 auto';
    	          var sharp = document.createElement("img");
    	          sharp.src = "http://webapi.amap.com/images/sharp.png";
    	          bottom.appendChild(sharp);
    	          info.appendChild(bottom);
    	          return info;
    	      }

    	      //关闭信息窗体
    	      function closeInfoWindow() {
    	          map.clearInfoWindow();
    	      }
      }
     /*  function testajax(keyword){
    	  $.ajax({
  	    	url : '/query/'+keyword, 
  	    	cache : false, 
  	    	async : false, 
  	    	type : "GET", 
  	    	dataType : 'json', 
  	    	success : function (result){
  	    		console.log("ajax");
  	    		console.log(result);
  	    		//实例化信息窗体
  	    		getDataToInfoWindow(result);
  	    	} 
    	}); 
      } */
      
    //实例化信息窗体
    //<span style="font-size:11px;color:#FFF;"> '</span>
    
      /* var setStyle = function(multiIcon) {
        if(multiIcon){
          mass.setStyle(style);
        }else{
          mass.setStyle(style[2]);
        }
      }
       */
      
      
    //just some colors
      var colors = [
          '#0cc2f2',
          '#4fd2b1',
          '#90e36f',
          '#ffe700',
          '#ff9e00',
          '#ff6700',
          '#ff1800'
      ];
		//使用高德地图提供的UI组件库 1.0
      AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {

          if (!PointSimplifier.supportCanvas) {
              alert('当前环境不支持 Canvas！');
              return;
          }

          var pointSimplifierIns = new PointSimplifier({
              zIndex: 115,
              autoSetFitView: false,
              map: map, //所属的地图实例
				//获取点的经度和纬度
              getPosition: function(item) {
                  if (!item) {
                      return null;
                  }

                  var parts = item.split(',');

                  return [parseFloat(parts[0]), parseFloat(parts[1])];
              },
              getHoverTitle: function(dataItem, idx) {
                  return '序号: ' + idx;
              },
              //使用GroupStyleRender
              renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
              renderOptions: {
                  eventSupport: false, //禁止事件,对性能更友好
                  //点的样式
                  pointStyle: {
                      fillStyle: null,
                      width: 5,
                      height: 5
                  },
                  topNAreaStyle: null,
                  getGroupId: function(item, idx) {

                      //随机返回一个组ID
                      return Math.ceil(colors.length * Math.random());
                  },
                  groupStyleOptions: function(gid) {

                      //随机设置大小
                      var radius = 2 + 10 * Math.random();

                      return {

                          pointStyle: radius > 0 ? {
                              content: function(ctx, x, y, width, height) {

                                  var p = {
                                      x: x + width / 2,
                                      y: y + height / 2,
                                      radius: radius
                                  };

                                  ctx.beginPath();
                                  var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
                                  gradient.addColorStop(0, "rgba(7,120,249,0.8)");
                                  gradient.addColorStop(1, "rgba(7,120,249,0.1)");
                                  ctx.fillStyle = gradient;
                                  ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
                                  ctx.fill();

                              },

                              //fillStyle: colors[gid % colors.length],
                              width: radius * 2,
                              height: radius * 2
                          } : null,
                          pointHardcoreStyle: {
                              width: radius * 2 + 3,
                              height: radius * 2 + 3
                          }
                      };
                  }

              }
          });


          //重复render
          setInterval(function() {
              pointSimplifierIns.render();
          }, 500)


          $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
          		//console.log(citys[0].lnglat.lng);
  		      var arrdata = new Array();
  		      for(var i=0;i<citys.length;i++){
  		    	  var testcity= citys[i].lnglat.lng+','+citys[i].lnglat.lat;
  		    	  arrdata[i] = testcity;
  		      }
  		     //console.log(arrdata);
  		     //将数据放入闪烁点库
              pointSimplifierIns.setData(arrdata);
			
              $('#loadingTip').remove();
      });
    </script>
  </body>
</html>